<template>
	<view>
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view> 
		<view class="waterfall" :style="{ marginTop: statusBarHeight + 'px' }">
			<view class="quit">
				<view class="divide-title">返佣金额：</view>
				<view class="quit-btn" @tap="CommissionRebate">
					<image class="quit-image" src="/static/muddlednessImg/sanse.png"></image>
					<text>返佣明细</text>
				</view>
			</view>
		</view>
		<text class="amount">{{userAllInfo.pay_today_total_rebate}}</text>
		<!-- 返佣金额 -->
		<view class="divide-box">
			<view class="divide-info">
				<view class="divide">
					<view class="divide-title">我的返佣</view>
					<view class="divide-nub">{{userAllInfo.pay_today_my_rebate}}</view>
				</view>
				<view class="divide">
					<view class="divide-title">下级返佣</view>
					<view class="divide-nub">{{userAllInfo.col_today_xj_rebate}}</view>
				</view>
			</view>
		</view>
		<!-- 代收返佣弹窗 -->
		<view class="proportion-box">
			<view class="proportion-function">
				<text class="public-white">代收返佣：</text>
				<view class="proportion-btn" @click="getpopup('collect')">点击查看</view>
			</view>
			<view class="proportion-function">
				<text class="public-white">代付返佣：</text>
				<view class="proportion-btn" @click="getpopup('pay')">点击查看</view>
			</view>
		</view>
		<!-- 代理按钮 -->
		<view class="agency">
			<view class="agency-btn" @click="SubordinateAgent">
				<image class="agency-img" src="/static/commonImg/dailishang.png"><text>下级代理</text></image>
			</view>
			<view class="agency-btn agency-btn2" @click="CreateAgent">
				<image class="agency-img" src="/static/commonImg/add.png"><text>创建代理</text></image>
			</view>
		</view>
		<!-- 返佣数据列表 -->
		<template>
			<view class="container">
				<!-- 筛选条件显示 -->
				<view class="tabs-container">
					<view class="tabs">
						<view class="tab" :class="{ active: activeTab === 0 }" @click="switchTab(0)">我的返佣</view>
						<view class="tab" :class="{ active: activeTab === 1 }" @click="switchTab(1)">下级返佣</view>
						<view class="indicator" :style="{ left: activeTab * 50 + 20 + '%'}"></view>
					</view>
				</view>
				<view v-if="tradeList && tradeList.length>0">
					<scroll-view direction="vertical" scroll-y="true" style="height: 100vh;" @scrolltolower="GetNewData"
						scroll-with-animation="true">
						<view class="trade-records" v-for="(item,index) in tradeList" :key="index">
							<view class="trade-number trade-top" @click="copyOrderNumber(item.order_number)">
								<view>交易单号：{{item.order_number}}</view>
								<image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image>
							</view>
							<view class="trade-flex trade-top">
								<view>收款渠道：{{paytype(item.bank_type_id)}}</view>
								<view>金额：<text class="public-red">{{item.order_money}}</text></view>
							</view>
							<view class="trade-flex trade-top">
								<view v-if="item.nickname">用户昵称：<text>{{item.nickname}}</text></view>
								<view v-else>银行名称：<text class="public-red">{{item.bank_name}}</text></view>
								<view>返佣金额：<text class="public-red">{{item.rebate_money}}</text></view>
							</view>
							<view class="trade-top">下单时间：{{timeString(item.createtime)}}</view>
						</view>
						<!-- 加载状态提示 -->
						<view v-if="isLoading" class="loading-text">加载中...</view>
						<view v-if="noMoreData" class="no-more-text">没有更多数据了</view>
					</scroll-view>
				</view>
				<EmptyRecord v-else></EmptyRecord>
			</view>
		</template>
		<!-- 返佣比例弹窗 -->
		<PromptPopup
		ref="pointOut" 
		option="2" 
		:list="collectItems"
		@confirm="collectMoney" />
	</view>
</template>

<script src="./index.js"></script>
<style src="./index.scss" lang="scss"></style>